<template>
  <div class="index">
    <!-- header -->
    <div id="header"></div>
    <!-- main -->
    <div id="main">      
      <div class="top">
        <!-- 轮播 -->
      <div class="carousel slide zdy-carousel lunbo" data-ride="carousel" id="banner">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="img/banner/1.jpg" alt="" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="img/banner/2.jpg" alt="" class="d-block w-100">
          </div>
          
        </div>
      </div>
     <div class="bg-light">
       <div class="inside">
       <!-- 热门消息 -->
      <div class="hot d-flex justify-content-between ">
        <div class="float-left left ml-2">伊北作品售出影视改编权</div>
        <ul class="d-flex right">
          <li><a href="">长篇拉力赛</a></li>
          <li><a href="">征文专区</a></li>
          <li><a href="">出版与改编</a></li>
          <li><a href="">作者福利</a></li>
        </ul>
      </div>
      <!-- 频道 -->
      <div class="d-flex channel  align-items-center  justify-content-center mt-5" >
        <a href="#">完本频道</a>
        <a href="#">完本频道</a>
        <a href="#" >悬疑频道</a>
        <a href="#" >幻想频道</a>
        <a href="#">女性频道</a>
        <a href="#" class="last">历史频道</a>
      </div>
     </div>
     </div>
      </div>
      <div class="bottom">
         <!-- zbtj 轮播-->
      <div class="zbtj">
        <div class="txt1 ml-2 ">重磅推荐</div>
        <div>
          <div class="d-flex justify-content-start ">
            <div class="zdy-book w-50 " v-for="(item,i) of oribooks1" :key="i">
              <div class="d-flex ">
                <a href="#"><img :src="`${item.avatar}`" alt="" class="mr-3"></a>
                <div class="right ">
                  <a href="#">{{item.book_name}}</a>
                  <div><span>{{item.writer}}</span></div>
                  <div class="txt">{{item.info}}</div>
                  <a href="#" class="txt-a">{{item.tag}}</a>
                </div>
              </div>
            </div>
            
          </div>
          <div class="d-flex justify-content-start ">
            <div class="zdy-book w-50 " v-for="(item,i) of oribooks2" :key="i">
              <div class="d-flex ">
                <a href="#"><img :src="`${item.avatar}`" alt="" class="mr-3"></a>
                <div class="right">
                  <a href="#">{{item.book_name}}</a>
                  <div><span>{{item.writer}}</span></div>
                  <div class="txt">{{item.info}}</div>
                  <a href="#" class="txt-a">{{item.tag}}</a>                 
                </div>
              </div>
            </div>           
          </div>
        </div>
      </div>
      <!-- 每周精品 轮播 -->
      <div class="mzjp  ">
        <h3 class="text-left">每周精品</h3>
        <div class="d-flex w-100">
          <div class="w-25 " v-for="(item,i) of mzjp" :key="i">
            <img :src="`${item.avatar}`" alt="">
            <p class="p1"> {{item.book_name}}</p>
            <p class="p2">{{item.writer}}</p>
            <p class="p3">{{item.info}}</p>
          </div>
        </div>
      </div>
      <!-- 签约新作 轮播 -->
      <div class="qyxz ">
        <h3 class="text-left">签约新作</h3>
        <div class="d-flex w-100 justify-content-around ">
          <div class="w-25" v-for="(item,i) of qyxz" :key="i">
            <img :src="`${item.avatar}`" alt="">
            <p class="p1"> {{item.book_name}}</p>
            <p class="p2">{{item.writer}}</p>
            <p class="p3">{{item.info}}</p>
          </div>
        </div>
      </div>
      <!-- 长篇拉力赛 轮播 -->
      <div class="cpll ">
        <div class="d-flex justify-content-between n1 "><img src="img/长篇拉力赛/0.png" alt=""><a href="">查看更多</a></div>
        <a href="" class="n2 "><span>言情组</span></a>
         <div class="d-flex flex-wrap justify-content-between ">
          <div class="n3 w-20" v-for="(item,i) of cpll" :key="i">
            <a href="" class="d-flex ">
              <div><img :src="`${item.avatar}`" alt=""></div>
              <div class="d">
                <div class="d1">{{item.book_name}}</div>
                <div class="d2">已售{{item.sale}}章</div>
              </div>
            </a>
          </div>
         
         </div> 
      </div>
      <!-- 排行 -->
      <div class="ph">
        <div class="ph1">
          <div class="d1">
            <div class="d-flex justify-content-between n1 mb-3"><h2>排行</h2><a href="">查看更多</a></div>
          </div>
          <div class="d2 d-flex justify-content-between">
            <div class="ds">
              <!-- 连载榜 -->
              <div>
                <div class="top">
                  <h1>连载榜</h1>
                  <h2>作品三日内日有更新，按周热度排行</h2>
                </div>
                <ul>
                  <li class="d-flex" v-for="(item,i) of ph[0]" :key="i">
                    <div>{{item.id}}</div>
                    <h3><span>{{item.book_name}}</span></h3>
                    <a href="" >{{item.tag}}</a>
                  </li>                 
                </ul>
              </div>             
            </div>
            <div class="ds">
              <!-- 潜力榜 -->
              <div>
                <div class="top">
                  <h1>潜力榜</h1>
                  <h2>作品七日内有更新且字数在二万至十万之间，按周阅读时长排序</h2>
                </div>
                <ul>
                  <li class="d-flex" v-for="(item,i) of ph[0]" :key="i">
                    <div>{{item.id}}</div>
                    <h3><span>{{item.book_name}}</span></h3>
                    <a href="" >{{item.tag}}</a>
                  </li>  
                </ul>
              </div>             
            </div>
            <div class="ds">
              <!-- 完本榜 -->
              <div>
                <div class="top">
                  <h1>完本榜(月)</h1>
                  <h2>八万字以上完本，按周阅读时长排序（ 作品完结 0 - 30 天 ）</h2>
                </div>
                <ul>
                  <li class="d-flex" v-for="(item,i) of ph[0]" :key="i">
                    <div>{{item.id}}</div>
                    <h3><span>{{item.book_name}}</span></h3>
                    <a href="" >{{item.tag}}</a>
                  </li>  
                </ul>
              </div>             
            </div>
            <div class="ds">
              <!-- 推荐榜 -->
              <div>
                <div class="top">
                  <h1>推荐榜(月)</h1>
                  <h2>按作品过去 1 个月所获得推荐票数排行</h2>
                </div>
                <ul>
                 <li class="d-flex" v-for="(item,i) of ph[0]" :key="i">
                    <div>{{item.id}}</div>
                    <h3><span>{{item.book_name}}</span></h3>
                    <a href="" >{{item.tag}}</a>
                  </li>  
                </ul>
              </div>             
            </div>
          </div>
        </div>
      </div>
      <!-- 长篇拉力赛近日更新作品-->
      <div class="jrgx">
        <div class="d-flex justify-content-between n1 mb-3"><h2>长篇拉力赛 · 近日更新作品
        </h2><a href="">查看更多</a>
      </div>        
         <div class="d-flex flex-wrap justify-content-between">
          <div class="n3 w-20" v-for="(item,i) of jrgx" :key="i">
            <a href="" class="d-flex " >
              <div><img :src="`${item.avatar}`" alt=""></div>
              <div class="d">
                <div class="d1">{{item.book_name}}</div>
                <div class="d2">已售{{item.sale}}章</div>
              </div>
            </a>
          </div>                  
         </div> 
      </div>
      <!-- 长篇拉力赛 · 精选长评 -->
      <div class="jxcp">
        <div class="d1"><h2>长篇拉力赛 · 精选长评</h2></div>
        <div class="d2">
          <!-- div>span*3 -->
          <div class="row1 d-flex justify-content-between"
                >
            <span v-for="(item,i) of comments1" :key="i">
              <a href="">{{item.comment}}</a>
              <div class="d1">{{item.comment}}</div>
              <div class="d2">
                <a href="">cherry</a>
                <span>5赞</span>
                <span>|</span>
                <span>1评论</span>
              </div>
            </span>
            
          </div>
          <div class="row1 d-flex justify-content-between">
            <span v-for="(item,i) of comments2" :key="i">
              <a href="">{{item.comment}}</a>
              <div class="d1">{{item.comment}}</div>
              <div class="d2">
                <a href="">cherry</a>
                <span>5赞</span>
                <span>|</span>
                <span>1评论</span>
              </div>
            </span>           
          </div>
        <!-- div>span*3 -->
        </div>
      </div>
      <!-- 猜你喜欢 -->
      <div class="cnxh">
        <div class="d-flex justify-content-between n1 mb-0"><h2>猜你喜欢
        </h2><a href="">换一组</a>
      </div> 
        <div class="d-flex w-100 justify-content-between">
          <div class="w-25" v-for="(item,i) of cnxh" :key="i">
            <img :src="`${item.avatar}`" alt="">
            <p class="p1"> {{item.book_name}}</p>
            <p class="p2">{{item.writer}}</p>
            <p class="p3">{{item.info}}</p>
          </div>         
        </div>
      </div>
      <!-- 第三届长篇拉力赛女性组关注名单作品 轮播-->
      <div class="nxgz">
        <div class="d-flex justify-content-between n1"><h2>第三届长篇拉力赛女性组关注名单作品
        </h2><a href="">查看更多</a>
      </div> 
      <div class="n2">拉力赛关注名单共四期，每期由各组读者投票最多的 10 部作品和编辑推荐的 5 部作品构成</div>
        <div class="d-flex w-100 justify-content-between">
           <div class="w-25" v-for="(item,i) of cnxh" :key="i">
            <img :src="`${item.avatar}`" alt="">
            <p class="p1"> {{item.book_name}}</p>
            <p class="p2">{{item.writer}}</p>
            <p class="p3">{{item.info}}</p>
          </div> 
        </div>
      </div>
      <!-- 第三届长篇拉力赛言情组关注名单作品 轮播-->
      <div class="yqgz">
        <div class="d-flex justify-content-between n1"><h2>第三届长篇拉力赛言情组关注名单作品
        </h2><a href="">查看更多</a>
      </div> 
      <div class="n2">拉力赛关注名单共四期，每期由各组读者投票最多的 10 部作品和编辑推荐的 5 部作品构成</div>
        <div class="d-flex w-100 justify-content-between">          
          <div class="w-25" v-for="(item,i) of cnxh" :key="i">
            <img :src="`${item.avatar}`" alt="">
            <p class="p1"> {{item.book_name}}</p>
            <p class="p2">{{item.writer}}</p>
            <p class="p3">{{item.info}}</p>
          </div> 
        </div>
      </div>
      <!-- 第三届长篇拉力赛悬疑组关注名单作品 轮播-->
      <div class="xygz">
        <div class="d-flex justify-content-between n1"><h2>第三届长篇拉力赛悬疑组关注名单作品
        </h2><a href="">查看更多</a>
      </div> 
      <div class="n2">拉力赛关注名单共四期，每期由各组读者投票最多的 10 部作品和编辑推荐的 5 部作品构成</div>
        <div class="d-flex w-100 justify-content-between">
          <div class="w-25" v-for="(item,i) of cnxh" :key="i">
            <img :src="`${item.avatar}`" alt="">
            <p class="p1"> {{item.book_name}}</p>
            <p class="p2">{{item.writer}}</p>
            <p class="p3">{{item.info}}</p>
          </div> 
        </div>
      </div>
      <!-- 第三届长篇拉力赛幻想组关注名单作品 轮播-->
      <div class="hxgz">
        <div class="d-flex justify-content-between n1"><h2>第三届长篇拉力赛幻想组关注名单作品
        </h2><a href="">查看更多</a>
      </div> 
      <div class="n2">拉力赛关注名单共四期，每期由各组读者投票最多的 10 部作品和编辑推荐的 5 部作品构成</div>
        <div class="d-flex w-100 justify-content-between">         
          <div class="w-25" v-for="(item,i) of cnxh" :key="i">
            <img :src="`${item.avatar}`" alt="">
            <p class="p1"> {{item.book_name}}</p>
            <p class="p2">{{item.writer}}</p>
            <p class="p3">{{item.info}}</p>
          </div> 
        </div>
      </div>
      <!-- 影视改编售出作品 轮播-->
     <div class="ysgb mt-5">
        <div class="d-flex justify-content-between n1"><h2>影视出版作品
        </h2><a href="">查看更多</a>
      </div> 
        <div class="d-flex w-100 justify-content-between">
          <div class="" v-for="(item,i) of yscb" :key="i">
            <a href=""><img :src="`${item.avatar}`" alt=""></a>
            <a class="a1"> <span>{{item.book_name}}</span></a>
            <div class="a2"><span>{{item.writer}}</span></div>
          </div>
         
        </div>
      </div>
      <!-- 纸书出版作品 轮播-->
      <div class="zhcb mt-5">
        <div class="d-flex justify-content-between n1"><h2>纸质出版作品
        </h2><a href="">查看更多</a>
      </div> 
        <div class="d-flex w-100 justify-content-between">
         <div class="" v-for="(item,i) of yscb" :key="i">
            <a href=""><img :src="`${item.avatar}`" alt=""></a>
            <a class="a1"> <span>{{item.book_name}}</span></a>
            <div class="a2"><span>{{item.writer}}</span></div>
          </div>
        </div>
      </div>
      <!-- 小雅奖 -->
      <div class="xyj">
        <div class="wc">
          <div class="nc">
            <div class="d-flex justify-content-between top">
              <h2>
                <span class="span1">小雅奖</span>
                <span class="span2 ">奖励最好的原创写作</span>
              </h2>
              <a href="">查看全部</a>
            </div>
            <h3 class="middle">-第一百七十二期-</h3>
            <div class="d-flex justify-content-between w-100
            bottom">
              <div class="zjlz w-50">
                <div class="d1">
                <h4>最佳连载</h4>
                <p>奖励两周内有更新的热门连载,奖金1000元</p>
                </div>
                <div class="d2">
                  <div class="d-flex justify-content-start">
                    <div class="left">
                      <a href=""><img src="img/小雅奖/1.jpg" alt=""></a>
                    </div>
                    <div class="right">
                      <a href=""><span class="span1">春痕不欲</span></a>
                      <div class="d1"><span class="span2">芦苇芭蕉</span></div>
                      <div class="d2">
                        <span class="span3">9.8</span>
                        <span class="span4"><a href="">言情</a></span>
                        <span class="span5">连载</span>
                      </div>
                    </div>
                  </div>
                  <p>《春痕不欲》是豆瓣阅读新人作者芦苇芭蕉创作的民国小说。作品讲述了清末民初，刺客养女因被父亲牵连，成为阶下囚后，不得不与温文尔雅的政客和野心勃勃的军阀大佬周旋、较量的故事。小说里男女主“强强对决”，使得剧情频频出现高能桥段。此外，女主的敏锐强大，引得读者好感顿生。作者以细腻温柔的笔触，书写了一段险象迭生、爱恨参半的“高级伪装者们”的爱情。故授予本期“小雅奖 · 最佳连载”。</p>
                </div>
              </div>
              <div class="zjzz w-50">
                <div class="d1">
                <h4>最佳作者</h4>
                <p>奖励三个月内有新创作的原创作者，奖金 2000 元。</p>
                </div>
                <div class="d2">
                  <div>
                  <div class="d-flex justify-content-start">
                    <div class="left">
                      <div class="out"><a href=""><img src="img/小雅奖/1.jpg" alt=""></a></div>
                    </div>
                    <div class="right">
                      <a href=""><span class="span1">凤舞残云</span></a>
                      <div class="d1"><span class="span2">5 部作品，2730835 阅读</span></div>                     
                    </div>
                  </div>
                  <p class="p1">代表作品：《噩梦解码》《微信时代》</p>
                </div>
                  <p>《春痕不欲》是豆瓣阅读新人作者芦苇芭蕉创作的民国小说。作品讲述了清末民初，刺客养女因被父亲牵连，成为阶下囚后，不得不与温文尔雅的政客和野心勃勃的军阀大佬周旋、较量的故事。小说里男女主“强强对决”，使得剧情频频出现高能桥段。此外，女主的敏锐强大，引得读者好感顿生。作者以细腻温柔的笔触，书写了一段险象迭生、爱恨参半的“高级伪装者们”的爱情。故授予本期“小雅奖 · 最佳连载”。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
        </div>   
    </div>
    <!-- footer -->
     <div class="footer">
    <div class="left">
      © 2014 - 2021 read.douban.com, all rights reserved.
      <a href="">北京方舟阅读科技有限公司</a>
      <div> 
            <a href="">京ICP备11027288号</a>
            <a href="">网络视听许可证0110418号</a>
            <a href="">新出发京批字第直160030号</a>
            <a href="">文网文[2009]267号 (总)网出证(京)字129号</a>
        </div>
    </div>
    <div class="right">
      <img src="/img/footer/logo.png" alt="">
    </div>
    <div class="middle">
      <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">联系我们</a></li>
        <li class="breadcrumb-item"><a href="#">版权声明</a></li>
        <li class="breadcrumb-item"><a href="#">内容导则</a></li>
        <li class="breadcrumb-item"><a href="#">帮助中心</a></li>
        <li class="breadcrumb-item"><a href="#">来这里工作</a></li>
      </ol>
      </nav>
    </div> 
  </div>


  </div>
</template>
<style lang="scss">
  @charset "utf-8";
 .index{
   overflow: hidden;
    #main{
    .top{
      min-width: 1000px;
      
      // 轮播
    .lunbo{
        height: 159.75px;
        img{
          height: 159.75px;
        } 
    }  
      .bg-light{
        width: 100%;
        .inside{
          width: 1300px;
          margin: 0 auto;
          .hot{
        height: 30px;
        padding: 30px  60px;
        
        .left{
          color: var(--grayBlack);
          font-size: 12px;
          text-align: start;
          line-height: 30px;
        }
        li{
          a{
            display: inline-block;
            border: none;
            border-radius: 3px;
            background: var(--white);
            color: var(--grayBlack);
            padding: 0 14px 0;
            margin: 0 0 0 8px;
            line-height: 30px;
          }
          .last{
            margin-right: 0;
          }
          a:hover{
            background-color: rgba(0, 102, 255, 0.445);
          }
        }
    }
    // 频道
    .channel{
        padding: 0 60px 30px 60px;
        width: 100%;
        height: 90px;        
        a{
          flex: 1 1 130px;
          // padding: 0 20px;
          margin-right: 20px;
          width: 130px;
          height: 60px;
          text-align: center;
          font-weight: bold;
          font-size: 20px;
          line-height: 60px;
          background-color: #fff;
          color:black;
          border-radius: 3px;          
          display: inline-block;
          border: none;
          border-radius: 4px;
          background: var(--white);
          color: var(--grayBlack);
        }
        .last{
          margin-right: 0 !important;
        }
        a:hover{
          background-color: rgba(0, 102, 255, 0.445);
        }
      }
        }
      }
    }
    //   zbtj
    .bottom{
      width: 1300px;
      margin: 0 auto;
    .zbtj{
        padding: 40px 60px 10px;
        .txt1{
            width: 100px;
            height: 30px;
            background-color: #88745a;
            color: #fff;
            padding: 6px 12px;
            text-align: center;
            font-size: 13px;
            border-radius: 3px;
            margin-top: -40px;
        }
        .zdy-book{
            width: 430px;
            height: 205px;
            padding: 20px;
            img{
              width: 110px;
              height: 165px;
            }
            .right{
              height: 165px;
              a:first-child{
                font-size: 20px;
                color:#333;
                font-weight: bold;
              }
              div{
                margin: 0 0 12px;
                span{
                  font-size: 12px;
                }
              }
              .txt{
                width: 235px;
                height: 50px;
                color: #333333;
                font-size: 14px;
                margin: 20px 30px 0 0;
                padding: 4px 15px;
              }
              .txt-a{
                font-size: 12px;
                background-color: #F26C98;
                color: #fff;
                margin: 0 5px 0 0;
                padding: px 3px;
              }
            }
          }
    }
    // 每周精品
    .mzjp{
        height: 400px;
        padding: 0 60px;
        h3{
            height: 24px;
            color:#333333;
            font-size: 24px;
        }
        div div{         
          height: 370px;
          padding: 40px 20px 0;
          img{
            width: 120px;
            height: 180px;
          }
          .p1{
            display: block;
            color: #333333;
            font-size: 16px;
          }
          .p2{
            display: block;
            color: #777777;
            font-size: 12px;
          }
          .p3{
            display: block;
            color: #333333;
            font-size: 13px;
          }
        }
    }
    //签约新作
    .qyxz{
      height: 400px;
      padding: 0 60px;
      h3{
            height: 24px;
            color:#333333;
            font-size: 24px;
      }
      div div{
        height: 370px;
        padding: 40px 20px 0;
        img{
          width: 120px;
          height: 180px;
        }
        .p1{
          display: block;
          color: #333333;
          font-size: 16px;
        }
        .p2{
          display: block;
          color: #777777;
          font-size: 12px;
        }
        .p3{
          display: block;
          color: #333333;
          font-size: 13px;
        }
      }
  }
    //长篇拉力赛
    .cpll{
      height: 300px;
      padding: 0 60px;
      .n1{
        height: 33px;
        img{
          width: 252px;
          height: 33px;
        }
        a{
          display: block;
          width: 80px;
          height: 30px;
          color:#333333;
          font-size: 13px;
          background-color: #ffffff;
          margin: 0 0 0 8px;
          padding: 0 14px;
          line-height: 30px;
        }
      }
      .n2{
        height: 65px;
        padding: 20px 20px 25px;
        span{
          width: 54px;
          height: 20px;
          color:#ffffff;
          font-size: 14px;
          background-color: #F26E4F;
          padding: 2px 6px;
        }
      }
      .n3{
        height: 39px;
        margin: 10px 20px 20px;
        img{
          width: 20px;
          height: 30px;
          margin: 10px 0 10px 10px
        }
        .d{        
          height: 39px;
          padding: 5px 20px 20px;
          
          .d1{
            height: 19px;
            color:#333333;
            font-size: 16px;
            margin: 0 0 1px;
          }
          .d2{
            width: 108px;
            height: 18px;
            color:#EF9E2C;
            font-size: 12PX;
          }
        }
      }
    }
    //排行
    .ph{
      height: 705px;
      background-color: #ffffff;
      .ph1{
        padding: 0 60px;
        .d1{
          padding: 0 8px;
          h2{
            width: 48px;
            height: 24px;
            color:#333333;
            font-size: 24px;
          }
          a{
            display: block;
            width: 80px;
            height: 30px;
            color:#333333;
            font-size: 13px;
            background-color: #ffffff;
            margin: 0 0 0 8px;
            padding: 0 14px;
          }
        }
        .d2{
          .ds{
            width: 276px;
            height: 635px;
            background-color: #FCFBF9;
            margin: 0 8px;
            padding: 0 10px 10px;
            .top{
              height: 100px;
              padding: 20px;
              h1{
                width: 209.5px;
                height: 22px;
                color:#BB996D;
                font-size: 18px;
              }
              h2{
                width: 209.5px;
                height: 18px;
                color: #A6A6A6;
                font-size: 12PX;
                margin: 2px 0 0;
              }
            }
            ul{
              margin: 0 auto;
              li{
                padding: 10px 20px;
                div{width: 20px;
                    height: 19px;
                    color:#F9C300;
                    font-size: 14px;
                    padding:4px 0 0 0;
                }
                h3{
                  width: 133.5px;
                 line-height: 19px;
                  span{
                    height: 16px;
                    color:#333333;
                    font-size: 14px;
                    line-height: 18px;                   
                  }
                }
                a{
                  width: 56px;
                  height: 18px;
                  color: #777777;
                  font-size: 12px;
                  padding:5px 0 0 0;
                }
              }
            }
          }
        }
      }

    }
    //长篇拉力赛近日更新作品
    .jrgx{
      height: 300px;
      padding: 0 60px;
      .n1{
        height: 33px;
        img{
          width: 252px;
          height: 33px;
        }
        h2{
          
          height: 24px;
          color: #333333;
          font-size: 24px;
      }
        a{
          display: block;
          width: 80px;
          height: 30px;
          color:#333333;
          font-size: 13px;
          background-color: #ffffff;
          margin: 0 0 0 8px;
          padding: 0 14px;
          line-height: 30px;
        }
      }
      .n2{
        height: 65px;
        padding: 20px 20px 25px;
        span{
          width: 54px;
          height: 20px;
          color:#ffffff;
          font-size: 14px;
          background-color: #F26E4F;
          padding: 2px 6px;
        }
      }
      .n3{
        height: 39px;
        margin: 10px 20px 20px;
        img{
          width: 20px;
          height: 30px;
          margin: 10px 0 10px 10px
        }
        .d{        
          height: 39px;
          padding: 5px 20px 20px;
          
          .d1{
            height: 19px;
            color:#333333;
            font-size: 16px;
            margin: 0 0 1px;
          }
          .d2{
            width: 108px;
            height: 18px;
            color:#EF9E2C;
            font-size: 12PX;
          }
        }
      }
    }
    //长篇拉力赛精选长评作品
    .jxcp{
      height: 284px;
      padding: 0 60px;
      .d1{
        height: 24px;
        margin-bottom: 30px;
        h2{
          width: 237.33px;
          height: 24px;
          color: #333333;
          font-size: 24px;
        }
      }
      .d2{
        height: 125px;
        .row1{

          span{
            width: 286.66PX;
            height: 95px;
            margin: 0 0 30px;
            padding: 0 20px;
            a{
              width: 246.66px;
              height: 19px;
              text-overflow: ellipsis;
              color: #333333;
              font-size: 16px;
              margin: 0 0 14px;
            }
            .d1{
              width: 246.66px;
              height: 38px;
              color: #333333;
              font-size: 13px;
              margin: 0 0 6px;
              text-overflow: ellipsis;
            }
            .d2{
              width: 246.66px;
              height: 18px;
              a{
                width: 76.05px;
                height: 18px;
                font-size: 12px;
                margin: 0 123.609px 0 0;
              }
              span{
                font-size: 12px;
                padding: 0;
              }
            }
          }
        }
      }
    }
    //猜你喜欢
    .cnxh{
      height: 460px;
      padding: 0 60px;
      margin-top: 30px;
      .n1{
        height: 33px;
        h2{
          font-size: 24px;
        }
        img{
          width: 252px;
          height: 33px;
        }
        a{
          display: block;
          width: 80px;
          height: 30px;
          color:#333333;
          font-size: 13px;
          background-color: #ffffff;
          margin: 0 0 0 8px;
          padding: 0 14px;
        }
      } 
      div div{
        height: 370px;
        padding: 40px 20px 0;
        img{
          width: 120px;
          height: 180px;
        }
        .p1{
          display: block;
          color: #333333;
          font-size: 16px;
        }
        .p2{
          display: block;
          color: #777777;
          font-size: 12px;
        }
        .p3{
          display: block;
          color: #333333;
          font-size: 13px;
        }
      }
  }
  //女性关注
    .nxgz{
      height: 460px;
      padding: 0 60px;
      .n1{
        height: 33px;
        h2{
          font-size: 24px;
        }
        img{
          width: 252px;
          height: 33px;
        }
        a{
          display: block;
          width: 80px;
          height: 30px;
          color:#333333;
          font-size: 13px;
          background-color: #ffffff;
          margin: 0 0 0 8px;
          padding: 0 14px;
        }
      } 
      .n2{
        width: 602.92px;
        height: 29px;
        color:#333333;
        font-size: 14px;
        margin: 20px 0 0;
        padding: 4px 0;
      }
      div div{
        height: 370px;
        padding: 40px 20px 0;
        img{
          width: 120px;
          height: 180px;
        }
        .p1{
          display: block;
          color: #333333;
          font-size: 16px;
        }
        .p2{
          display: block;
          color: #777777;
          font-size: 12px;
        }
        .p3{
          display: block;
          color: #333333;
          font-size: 13px;
        }
      }
   }
  //  言情关注
    .yqgz{
    height: 460px;
    padding: 0 60px;
    .n1{
      height: 33px;
      h2{
        font-size: 24px;
      }
      img{
        width: 252px;
        height: 33px;
      }
      a{
        display: block;
        width: 80px;
        height: 30px;
        color:#333333;
        font-size: 13px;
        background-color: #ffffff;
        margin: 0 0 0 8px;
        padding: 0 14px;
      }
    } 
    .n2{
      width: 602.92px;
      height: 29px;
      color:#333333;
      font-size: 14px;
      margin: 20px 0 0;
      padding: 4px 0;
    }
    div div{
      height: 370px;
      padding: 40px 20px 0;
      img{
        width: 120px;
        height: 180px;
      }
      .p1{
        display: block;
        color: #333333;
        font-size: 16px;
      }
      .p2{
        display: block;
        color: #777777;
        font-size: 12px;
      }
      .p3{
        display: block;
        color: #333333;
        font-size: 13px;
      }
    }
   }
  //  悬疑关注
   .xygz{
    height: 460px;
    padding: 0 60px;
    .n1{
      height: 33px;
      h2{
        font-size: 24px;
      }
      img{
        width: 252px;
        height: 33px;
      }
      a{
        display: block;
        width: 80px;
        height: 30px;
        color:#333333;
        font-size: 13px;
        background-color: #ffffff;
        margin: 0 0 0 8px;
        padding: 0 14px;
      }
    } 
    .n2{
      width: 602.92px;
      height: 29px;
      color:#333333;
      font-size: 14px;
      margin: 20px 0 0;
      padding: 4px 0;
    }
    div div{
      height: 370px;
      padding: 40px 20px 0;
      img{
        width: 120px;
        height: 180px;
      }
      .p1{
        display: block;
        color: #333333;
        font-size: 16px;
      }
      .p2{
        display: block;
        color: #777777;
        font-size: 12px;
      }
      .p3{
        display: block;
        color: #333333;
        font-size: 13px;
      }
    }
   }
  //  幻想关注
   .hxgz{
    height: 460px;
    padding: 0 60px;
    .n1{
      height: 33px;
      h2{
        font-size: 24px;
      }
      img{
        width: 252px;
        height: 33px;
      }
      a{
        display: block;
        width: 80px;
        height: 30px;
        color:#333333;
        font-size: 13px;
        background-color: #ffffff;
        margin: 0 0 0 8px;
        padding: 0 14px;
      }
    } 
    .n2{
      width: 602.92px;
      height: 29px;
      color:#333333;
      font-size: 14px;
      margin: 20px 0 0;
      padding: 4px 0;
    }
    div div{
      height: 370px;
      padding: 40px 20px 0;
      img{
        width: 120px;
        height: 180px;
      }
      .p1{
        display: block;
        color: #333333;
        font-size: 16px;
      }
      .p2{
        display: block;
        color: #777777;
        font-size: 12px;
      }
      .p3{
        display: block;
        color: #333333;
        font-size: 13px;
      }
    }
   }
  //  影视改编
   .ysgb{
    height: 282.5px;
    padding: 0 60px;
    .n1{
      height: 33px;
      h2{
        font-size: 24px;
      }
      img{
        width: 252px;
        height: 33px;
      }
      a{
        display: block;
        width: 80px;
        height: 30px;
        color:#333333;
        font-size: 13px;
        background-color: #ffffff;
        margin: 0 0 0 8px;
        padding: 0 14px;
      }
    } 
    div div{
      width: 145px;
      height: 252.5px;
      padding: 40px 20px 0;
      a{
        img{
        width: 120px;
        height: 180px;
      }
      }
      .a1{
        width: 105px;
        height: 17px;
        span{
          width: 56px;
          height: 17px;
          color: #333333;
          font-size: 14px;
        }
      }
      .a2{
        width: 105px;
        height: 12px;
        margin: 0 0 12px;
        padding: 0;
        span{
          height: 14px;
          color: #777777;
          font-size: 12px;
        }
      }
    }
   }
  //  纸质出版
  .zhcb{
    height: 282.5px;
    padding: 0 60px;
    .n1{
      height: 33px;
      h2{
        font-size: 24px;
      }
      img{
        width: 252px;
        height: 33px;
      }
      a{
        display: block;
        width: 80px;
        height: 30px;
        color:#333333;
        font-size: 13px;
        background-color: #ffffff;
        margin: 0 0 0 8px;
        padding: 0 14px;
      }
    } 
    div div{
      width: 145px;
      height: 252.5px;
      padding: 40px 20px 0;
      a{
        img{
        width: 120px;
        height: 180px;
      }
      }
      .a1{
        width: 105px;
        height: 17px;
        span{
          width: 56px;
          height: 17px;
          color: #333333;
          font-size: 14px;
        }
      }
      .a2{
        width: 105px;
        height: 12px;
        margin: 0 0 12px;
        padding: 0;
        span{
          height: 14px;
          color: #777777;
          font-size: 12px;
        }
      }
    }
   }
   .xyj{
     .wc{
       height: 588px;
       padding: 40px 0;
       background-color: #ffffff;
       .nc{
         padding: 0 60px;
         .top{
           height: 30px;
           h2{
             height: 24px;
             .span1{
               width: 72px;
               height: 27px;
               color:#333333;
               font-size: 24px;
             }
             .span2{
               width: 117px;
               height: 15px;
               color:#A6A6A6;
               font-size: 13px;
               margin: 0 0 0 10px;
               line-height: 24px;
             }
           }
           a{
             width: 80px;
             height: 30px;
             color:#333333;
             font-size: 13px;
             background-color: #ffffff;
             margin: 0 0 0 8px;
             padding: 0 14px;
           }
         }
         .middle{
           text-align: center;
           height: 15px;
           color:#BB996D;
           font-size: 15px;
           margin: 30px 0;
         }
         .bottom{
           height: 403px;
           .zjlz{
            height: 403px;
            background-color: #FCFBF9;
            margin: 0 8px 0 0;
            padding: 20px;
             .d1{
               height: 42px;
               h4{
                 height: 22px;
                 color:#BB996D;
                 font-size: 18PX;
               }
               P{
                 height: 18px;
                 color:#A6A6A6;
                 font-size: 12px;
                 margin: 2px 0 0;
               }
             }
             .d2{
               height: 291px;
               .left{
                 height: 120px;
                 margin: 30px 0 0;
                 img{
                   width: 80px;
                   height: 120px;
                   background-color: #000000;
                   margin: 0 15px 0 0;
                  }

               }
               .right{
                 width: 132.69px;
                 height: 120px;
                 margin: 30px 0 0;
                 a{
                   width: 132.69em;
                   height: 20px;
                   .span1{
                    width: 64px;
                    height: 20px;
                    color:#333333;
                    font-size: 16px;
                   }
                 }
                 .d1{
                   width: 132.69px;
                   height: 12px;
                   margin: 0 0 12px;
                   .span2{
                    width: 48px;
                    height: 14px;
                    color:#777777;
                    font-size: 12px;
                   }
                 }
                 .d2{
                   width: 132.69px;
                   height: 12px;
                   .span3{
                     width: 16.69px;
                     height: 14px;
                     font-size: 12px;
                     color:#FA595F;
                     margin: 0 0 0 4px;
                   }
                   .span4{
                     width: 45px;
                     height: 14px;
                     a{
                       font-size: 12px;
                       color:#777777;
                     }
                   }
                   .span5{
                    color: #777777;
                    font-size: 12px;
                   }
                 }
               }
               p{
                 height: 141px;
                 color: #333333;
                 font-size: 13px;
                 margin: 30px 0 0;
                 padding: 4px 15px;
               }
             }
           }
           .zjzz{
            height: 403px;
            background-color: #FCFBF9;
            margin: 0 8px 0 0;
            padding: 20px;
             .d1{
               height: 42px;
               h4{
                 height: 22px;
                 color:#BB996D;
                 font-size: 18PX;
               }
               P{
                 height: 18px;
                 color:#A6A6A6;
                 font-size: 12px;
                 margin: 2px 0 0;
               }
             }
             .d2{
               height: 291px;
               .left{
                 height: 70px;
                 margin: 30px 0 0;
                 .out{
                  width: 70px;
                  height: 70px;
                  border-radius: 50%;
                  overflow: hidden;
                  margin: 0 15px 0 0;
                  img{
                    width: 70px;
                    height: 70px;
                    background-color: #000000;
                    margin: 0 15px 0 0;
                   }
                 }

               }
               .right{
                 width: 132.69px;
                 height: 70px;
                 margin: 30px 0 0;
                 a{
                   width: 132.69em;
                   height: 20px;
                   .span1{
                    width: 64px;
                    height: 20px;
                    color:#333333;
                    font-size: 16px;
                   }
                 }
                 .d1{
                   width: 132.69px;
                   height: 12px;
                   margin: 0 0 12px;
                   .span2{
                    width: 48px;
                    height: 14px;
                    color:#777777;
                    font-size: 12px;
                   }
                 }                
               }
               .p1{
                 height: 19px;
               }
               p{
                 height: 141px;
                 color: #333333;
                 font-size: 13px;
                 margin: 30px 0 0;
                 padding: 4px 15px;
               }
             }
           }
         }
       }
     }
   }
  }
  }
  .footer{ 
    min-width: 1000px; 
    height: 40px;
    background-color: #3E4347;
    color: #A6A6A6;
    font-size:12px;
    .left{
     float: left;
     margin-left: 10px;
     margin-top: 3px;
     a{
       font-size: 12px;
       color:#A6A6A6
     } 
    }
    .middle{
      float:right;
      height: 40px;
      a{
        font-size: 12px;
        color:#fff
      }
      a:hover{
        background-color: #fff;
        color:#000
      }
      .breadcrumb-item + .breadcrumb-item::before {
          display: inline-block;
          padding-right: 0.5rem;
          padding-left: 0.5rem;
          color: #fff;
          content: "·";
        }
      .breadcrumb {  
          background-color: #3E4347; 
          height: 40px;         
        }
    }
    .right{
      float: right;
      margin-right: 20px;
      line-height: 40px;
    }
  }

  
 }
</style>
<script>
export default {
  data(){
    return {
      oribooks1:[],
      oribooks2:[],
      comments1:[
        {id:1,comment:'你永远可以相信西西！！！肉眼可见的进步'},
        {id:2,comment:'第一次写悬疑就如此成功，十分惊喜。'},
        {id:3,comment:'西西的文字很有灵气，故事结构扎实，措辞优美，'}
        ],
      comments2:[
      {id:1,comment:'你永远可以相信西西！！！肉眼可见的进步'},
      {id:2,comment:'第一次写悬疑就如此成功，十分惊喜。'},
      {id:3,comment:'西西的文字很有灵气，故事结构扎实，措辞优美，'}
      ],
      mzjp:[],
      qyxz:[],
      cpll:[
        {id:1,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:2,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:3,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:4,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:5,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"} ,
        {id:6,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:7,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:8,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:9,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:10,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"} ,
        {id:11,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:12,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:13,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:14,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:15,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"} 
      ],
      ph:[
        [
          {id:1,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:2,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:3,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:4,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:5,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"} ,
        {id:6,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:7,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:8,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:9,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:10,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"}
        ],
        [
          {id:1,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:2,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:3,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:4,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:5,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"} ,
        {id:6,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:7,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:8,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:9,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:10,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"}
        ],
        [
          {id:1,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:2,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:3,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:4,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:5,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"} ,
        {id:6,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:7,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:8,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:9,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:10,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"}
        ],
        [
          {id:1,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:2,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:3,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:4,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:5,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"} ,
        {id:6,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:7,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:8,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:9,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:10,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"}
        ]
      ],
      jrgx:[
        {id:1,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:2,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:3,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:4,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:5,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"} ,
        {id:6,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:7,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:8,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:9,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:10,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"},
        {id:11,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:12,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:13,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:14,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:15,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"}
      ],
      cnxh:[
        {id:1,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:2,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:3,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:4,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:5,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"} 
      ],
      yscb:[
         {id:1,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:2,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:3,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"},
        {id:4,book_name:'山海志怪录',writer:'周阿乙',info:'女道士下山，悬疑版打怪升级',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/4.jpg',sale:"20054"} ,
        {id:5,book_name:'孤岛狼人杀',writer:'徐不渝',info:'“狼人杀”游戏会玩吗？我来教你，每天晚上杀死一个人就可以了。',tag:'奇遇怪谈',intr:'',avatar:'/img/zbtj/5.jpg',sale:"20054"} ,
        {id:6,book_name:'便利店女孩',writer:'沈十六',info:'一场守护少女的复仇，是否值得她们毁掉人生？',tag:'复仇计划',intr:'',avatar:'/img/zbtj/1.jpg',sale:"20054"},
        {id:7,book_name:'一物降一物',writer:'proboboli',info:'爱情世界里的迷魂法则——驯服Ta。',tag:'现代言情',intr:'',avatar:'/img/zbtj/2.jpg',sale:"20054"},
        {id:8,book_name:'神的白兔糖',writer:'桩乐',info:'腹黑师父与杀马特徒弟联手追凶，重返十三年前杀人现场。',tag:'罪案故事',intr:'',avatar:'/img/zbtj/3.jpg',sale:"20054"}
      ],
      xyj:[

      ]
    }
  },
  mounted(){
    this.axios.get('list/origin').then(res=>{
        console.log(res.data.data)
        let data=res.data.data;
        this.oribooks1=data.splice(0,2)
        this.oribooks2=data.splice(0,2)
        this.mzjp=data.splice(0,5)
        this.qyxz=data.splice(0,5)
        this.cnxh=data.splice(0,5)
      })
  }
}
</script>